---
interface Props {
  title: string
}

const { title } = Astro.props
---

<!doctype html>
<html lang='en'>
  <head>
    <meta charset='UTF-8' />
    <meta
      name='description'
      content='Tailwind plugin to add easily animations to your website'
    />
    <meta name='viewport' content='width=device-width' />
    <link rel='icon' type='image/svg+xml' href='/favicon.svg' />
    <meta name='theme-color' content='#0099ff' />
    <meta name='og:title' content={title} />
    <meta
      name='og:description'
      content='Tailwind plugin to add easily animations to your website'
    />
    <meta name='og:image' content='/og.jpg' />
    <meta name='twitter:card' content='summary_large_image' />
    <title>{title}</title>
  </head>
  <body
    class='relative bg-gray-50 text-gray-950 antialiased dark:bg-gray-950 dark:text-gray-50'
  >
    <slot />
  </body>
</html>

<style is:global>
  @font-face {
    font-family: 'Figtree';
    src: url('../../public/fonts/Figtree.ttf');
  }

  @font-face {
    font-family: 'Geist Mono';
    src: url('../../public/fonts/GeistMono.ttf');
  }
</style>
